<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/login.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
   <link type="text/css" rel="stylesheet" href="css/message.css" />
   <script type="text/javascript" src="js/message.min.js"></script>
   <script type="text/javascript">
      //正则验证手机号
      function checkMobile(str) {
         var re = /^1\d{10}$/
         if (re.test(str)){
            return "phone";
         }else{
            return false;
         }
      }

      //验证输入的账号格式
      function checkAccount(str) {
          if(checkMobile(str)=="phone"){
            return "uphone="+str;
         }else {
            $.message({
               message:"请输入正确的账号",
               time:1500,
               type:"warning"
            })
            return false;
         }
      }
      //验证是否勾选用户协议
      function isbox() {
         if($("#isbox")[0].className=="CheckBox Yes"){
            $("[name='registerdiv']")[0].style="opacity:0.5;"
         }else {
            $("[name='registerdiv']")[0].style="opacity:1;"
         }
      }

      function registerUser(username,password){
         $.post("user/register",username+"&upassword="+password,function (bol) {
            if(bol=="true"){
               $.message({
                  message:"注册成功",
                  time:1500,
                  type:"success"
               })
               setTimeout(function () {
                  location.href="login.jsp";
               },1500);
            }else if (bol=="exist"){
               $.message({
                  message:"用户已存在",
                  time:1500,
                  type:"warning"
               })
            }
         })
      }

      //验证密码是否符合规则
      function checkPassword(password){
         if(password.length>=6&&password.length<=20)
            return true
         return false;
      }

      $(document).on("change","[name='password']",function () {
         if(checkPassword($(this).val())){
            $(".zcpart6")[1].style="";
         }else {
            $(".zcpart6")[1].style="color:red";
         }
      })

      $(document).on("click","#registerid",function () {
         var username = $("[name='username']").val();
         var password = $("[name='password']").val();
         if($("#isbox")[0].className=="CheckBox Yes"){
            var checked = checkAccount(username);
            if(checked!=false){
               if(checkPassword(password)){
                  registerUser(checked,password);
               }
            }

         }
      })
   </script>
<title>注册</title>
</head>

<body>
<div class="header">
   <div class="mainwarp">
      <div class="logo"><a href="index.jsp"><img src="images/log.png" /></a></div>
      <div class="welcome">欢迎注册</div>
      <div class="headerright">
         <a href="login.jsp">个人登录</a>
         <span>|</span>
         <a href="index.jsp">返回首页</a>
      </div>
   </div>
</div>
<div class="zhuceBox">
   <div class="zcLeft">
      <ul id="tabzc">
          <li>手机号注册</li>
          <li></li>
          <div class="clear"></div>
      </ul>
      <div class="clear"></div>
      <div id="contentzc">
          <ul style="display:block;">
             <div class="zcpart0">
                <div class="zcpart5">
                   <span></span>
                   <input name="username" type="text" placeholder="手机号"/>
                </div>
                <div class="zcpart6">手机号用于登录和找回密码</div>
                <div class="zcpart7">
                   <span></span>
                   <input name="password" type="password" placeholder="设置密码"/>
                </div>
                <div class="zcpart6">请输入6-20个字符</div>
                <div class="zcpart2_c">
                    <span class="CheckBox Yes" id="isbox" onclick="isbox();"></span>
                    <span style="float:left">我已阅读并接受<a href="user_agreement.jsp">用户协议</a></span>
                </div>
                <div class="clear"></div>
                <div class="zcpart8" name="registerdiv">
                    <a href="#" id="registerid" onclick="return false;">注 册</a>
                </div>
                <div class="zcpart8 zcpart9">
                    <a href="resume.jsp">一分钟填写简历 快速填写 省时省力</a>
                </div>
             </div>
          </ul>
      </div>
   </div>
   <div class="zcRight">
      <div class="topdiv">
         <span class="noPa">已有账号了？</span><br />
         <a href="login.jsp">立即登录</a>
      </div>
   </div>
</div>
<div class="clear"></div>
</body>
</html>
